<template>
	<view class="course-details">
    <!-- 课程头部 部分，图片和价格 还有人气等 -->
		<CourseHeader />
    <!-- 课程主要内容，4个Tab 和 对应的模块 -->
    <view :style="{'height': + scrollHeight + 'px'}">
      <TabBar :tabList="tabList" v-model="tabIndex" />
      <swiper :current="tabIndex" :duration="300" circular @change="changeTab" @animationfinish="animationfinish">
        <swiper-item  v-for="(item, index) in tabList" :key="index">
          <scroll-view scroll-y >
            <CourseInfo v-show="tabIndex === 0" />
            <CourseChapter v-show="tabIndex === 1" />
            <CourseComment v-show="tabIndex === 2" />
            <CourseGroup v-show="tabIndex === 3" />
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <view class="bottom">
      <button class="buy" @click="clickBottomBtn" type="default" hover-class="none">{{ (isBuy || !course.price) ? '立即观看' : '立即购买' }}</button>
    </view>
    <!-- 分享组件 -->
    <Share ref="shareRef" />
	</view>
</template>

<script>
  import CourseHeader from '@/pages/course/components/course-header'
  import CourseInfo from '@/pages/course/components/course-info'
  import CourseChapter from '@/pages/course/components/course-chapter'
  import CourseComment from '@/pages/course/components/course-comment'
  import CourseGroup from '@/pages/course/components/course-group'
  import TabBar from '@/components/common/tar-bar'
  // 分享组件
  import Share from '@/components/share'
  
	export default {
    components: {
      CourseHeader,
      CourseInfo,
      CourseChapter,
      CourseComment,
      CourseGroup,
      TabBar,
      Share
    },
		data() {
			return {
        // 当前课程
        course: {},
        // 课程是否购买
        isBuy: false,
				tabList: [
          { id: '1', name: '详情' },
          { id: '2', name: '章节' },
          { id: '3', name: '评论' },
          { id: '4', name: '套餐' }
        ],
        // 因为内部的滑动机制限制，tabs组件和swiper组件的index用不同变量赋值
        tabIndex: 0,
        swiperIndex: 0,
        // 活动区域的高度，需要动态计算
        scrollHeight: 500,
        statusNavHeight: 0, // 状态栏+导航高度
			}
		},
    onLoad(options) {
      console.log('视频详情页面，id为：' , options.courseId)
      // 这里肯定要通过id 查详情，就模拟一个吧
      this.getCourseById(options.courseId).then(res => {
        console.log('函数执行结果为', res)
        this.getScrollHeight()
      })
    },
    /**
     * 页面导航按钮事件
     * @param {Object} event
     */
    onNavigationBarButtonTap(event) {
      console.log(event)
      // 收藏
      if (event.type === 'favorite') {
        this.$refs.shareRef.showHandler(true)
      }
    },
		methods: {
      /**
       * 根据课程id 获取课程详情
       * @param {Object} courseId
       */
       getCourseById (courseId) {
         return new Promise((resolute, reject) => {
           this.course = {
             id: 1,
             coverImg: '/static/images/banner1.jpg',
             title: 'SpringBoot基础入门到高级项目实战深入分析底层架构',
             teacherName: '啊哈C',
             price: 0,
             studyTotal: 1234
           }
           resolute(this.course)
         })     
      },
      /**
       * 点击下方购买或观看按钮
       */
      clickBottomBtn() {
        // 立即观看
        if (this.isBuy || this.course.price == 0) {
          uni.navigateTo({
            url: `/pages/course/course-play/course-play?url=${this.course.url}`
          })
        } else {
          // 购买逻辑
        }
      },
      /**
       * 获取滑动区域的高度
       */
      getScrollHeight() {
        // 让屏幕的高度 - 状态栏的高度 - 顶部导航栏的高度
        const systemInfo = uni.getSystemInfoSync()
        // 状态栏的高度
        const statusBarHeight = systemInfo.statusBarHeight
        // 导航高度
        if (systemInfo.platform === 'android') {
          this.statusNavHeight = 48 + statusBarHeight
        } else if (systemInfo.platform === 'ios') {
          this.statusNavHeight = 44 + statusBarHeight
        }
        this.scrollHeight = systemInfo.windowHeight - this.statusNavHeight
        console.log('页面的高度为：', this.scrollHeight)
      },
      /**
       * 切换tab时，对应的swiper 也切换
       * @param {Object} e
       */
			changeTab(e) {
        this.tabIndex = e.detail.current
      },
      /**
       * 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
       * swiper滑动结束，分别设置tabs和swiper的状态
       * @param {Object} e
       */
      animationfinish(e) {
        let current = e.detail.current;
        this.tabIndex = current;
      },
      /**
       * 获取当前是否已经购买此视频
       */
      getIdBuy () {
        // 这里还没做登录逻辑，所以这要有token，就说明已经购买
        const token = uni.getStorageSync(this.$_global.TOKEN)
        if (token) {
          this.isBuy = true
        }
      }
		}
	}
</script>

<style lang="scss">
.course-details {
  // 内容超出空页面高度时，启动 scroll-view 滚动
  overflow: hidden;
  swiper, 
  scroll-view {
    height: 100%;
  }
  .bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF;
    height: 100rpx;
  }
  .buy {
    width: 700rpx;
    height: 80rpx;
    margin-top: 10rpx;
    background-color: #345DC2;
    text-align: center;
    font-size: 35rpx;
    color: #FFFFFF;
    border-radius: 50rpx;
    line-height: 80rpx;
  }
}
</style>
